<template>
  <div class="admin-page">
    <div class="page-header">
      <h2>管理后台</h2>
      <p>系统管理和数据统计</p>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6" v-for="stat in adminStats" :key="stat.id">
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon :size="32">
                <component :is="stat.icon" />
              </el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 功能模块 -->
    <div class="admin-modules">
      <el-row :gutter="20">
        <el-col :span="8" v-for="module in adminModules" :key="module.id">
          <div class="module-card" @click="handleModuleClick(module)">
            <div class="module-icon">
              <el-icon :size="48">
                <component :is="module.icon" />
              </el-icon>
            </div>
            <h3>{{ module.title }}</h3>
            <p>{{ module.description }}</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 系统状态 -->
    <div class="system-status">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>系统状态</span>
            <el-button type="primary" size="small">刷新</el-button>
          </div>
        </template>
        <el-table :data="systemStatus" style="width: 100%">
          <el-table-column prop="service" label="服务名称" />
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="uptime" label="运行时间" />
          <el-table-column prop="load" label="负载" />
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  User,
  Monitor,
  DataAnalysis,
  Setting,
  Document,
  Bell,
  Warning,
  SuccessFilled
} from '@element-plus/icons-vue'
import { getOverviewStats } from '@/api/stats'

export default {
  name: 'AdminPanel',
  components: {
    User,
    Monitor,
    DataAnalysis,
    Setting,
    Document,
    Bell,
    Warning,
    SuccessFilled
  },
  setup() {
    console.log('setup 执行了')
    const router = useRouter()

    const adminStats = ref([
      {
        id: 1,
        label: '总用户数',
        value: 0,
        icon: 'User'
      },
      {
        id: 2,
        label: '在线用户',
        value: 0,
        icon: 'Monitor'
      },
      {
        id: 3,
        label: '今日访问',
        value: 0,
        icon: 'DataAnalysis'
      },
      {
        id: 4,
        label: '系统告警',
        value: 0,
        icon: 'Warning'
      }
    ])

    const fetchStats = async () => {
      console.log('fetchStats 被调用了')
      try {
        const res = await getOverviewStats()
        const stats = res
        adminStats.value[0].value = stats.totalUser
        adminStats.value[1].value = stats.onlineUser
        adminStats.value[2].value = stats.todayVisit
        adminStats.value[3].value = stats.systemWarning
      } catch (e) {
        console.error('fetchStats error:', e)
      }
    }

    fetchStats()
    setInterval(fetchStats, 5000)

    const adminModules = ref([
      {
        id: 1,
        title: '用户管理',
        description: '管理系统用户和权限',
        icon: 'User',
        path: '/admin/users'
      },
      {
        id: 2,
        title: '日志审计',
        description: '查看操作日志记录',
        icon: 'Document',
        path: '/logs'
      },
      {
        id: 3,
        title: '职称评审',
        description: '管理教师职称评审申请',
        icon: 'Document',
        path: '/admin/title-application'
      }
    ])

    const systemStatus = ref([
      {
        service: 'Web服务器',
        status: '正常',
        uptime: '15天 8小时',
        load: '45%'
      },
      {
        service: '数据库服务',
        status: '正常',
        uptime: '12天 3小时',
        load: '32%'
      },
      {
        service: '文件存储',
        status: '正常',
        uptime: '8天 16小时',
        load: '28%'
      },
      {
        service: '邮件服务',
        status: '异常',
        uptime: '2小时 15分钟',
        load: '85%'
      }
    ])

    // 处理模块点击
    const handleModuleClick = (module) => {
      if (module.path) {
        router.push(module.path)
      }
    }

    return {
      adminStats,
      adminModules,
      systemStatus,
      handleModuleClick
    }
  }
}
</script>

<style scoped>
.admin-page {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h2 {
  color: var(--text-color);
  margin-bottom: 8px;
  font-size: 28px;
}

.page-header p {
  color: var(--text-color-secondary);
  font-size: 16px;
}

.stats-section {
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.stat-icon {
  color: var(--primary-color);
  margin-right: 16px;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 4px;
}

.stat-label {
  color: var(--text-color-secondary);
  font-size: 14px;
}

.admin-modules {
  margin-bottom: 40px;
}

.module-card {
  background: white;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.module-icon {
  margin-bottom: 16px;
  color: var(--primary-color);
}

.module-card h3 {
  margin-bottom: 12px;
  color: var(--text-color);
}

.module-card p {
  color: var(--text-color-secondary);
  line-height: 1.6;
}

.system-status {
  margin-bottom: 40px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.todo-alert {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.todo-text {
  display: flex;
  flex-direction: column;
}

.todo-desc {
  font-size: 13px;
  margin-top: 5px;
  opacity: 0.8;
}

.todo-actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  .stats-section .el-col,
  .admin-modules .el-col {
    margin-bottom: 15px;
  }
}
</style> 